/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div class="interact-task__wrap">
        <page-title
            :return-btn="true"
            :return-title="_('返回AI Flow列表')"
            :title-name="taskName"
            @return="_returnInteractTask">
            <div v-if="singerType"
                 class="project-info">
                <sf-button-primary
                    :default-disabled="disableClone"
                    class="btn-blank creat-button white  m-r20"
                    @click="_cloneInteractTask">
                    <lang>克隆任务</lang>
                </sf-button-primary>
            </div>
        </page-title>
        <div 
            v-show="paramsHeaderList.length>0"
            class="interact-task__table  m-a20">
            <div class="common-title">
                <lang>任务参数</lang>
            </div>
            <sf-grid>
                <sf-table ref="paramsTable"
                          :options="options_fix_params">
                    <sf-table-column 
                        v-show="paramsHeaderList.length>0"
                        type="index">
                        序号
                    </sf-table-column>
                    <sf-table-column 
                        v-for="(item,index) in paramsHeaderList"
                        :key="index"
                        :data-index="item"
                        :default-width="100">
                        <lang>{{ item }}</lang>
                    </sf-table-column>
                </sf-table>
            </sf-grid>
        </div>
        <div class="m-l20">
            <div class="common-title">
                <lang>任务详情</lang>
            </div>
        </div>
        <iframe
            id="iframe"
            ref="visualToolIframeRef"
            :src="iframeUrl"
            class="visual__iframe"
            @load="hideDom">
        </iframe>
    </div>
</template>
<script>

import { deepClone } from 'src/util/deep_clone';
import pageTitle from 'src/home/mod_cluster/common/page_title/page_title';
import { getStorage } from 'src/util/local_storage';
import store from 'src/vuex/store';
let userID = store.state.userId;
import trainingUrlAdapter from 'src/home/mod_common/training_url_adapter';
import AddInteractTask from 'src/home/mod_cluster/project_manager/components/label_form/add_interact_task.vue';
export default {
    name: 'PipelineDetail',
    components: {
        pageTitle
    },
    data () {
        return {
            options_fix_params: {
                bufferView: false,

                // 配置这个后才可以实现保持勾选状态
                idProperty: 'id',
                selectionHide: true
               

                // 配置这个后才可以实现保持勾选状态
            },
            options_fix_metrics: {
                bufferView: false,

                // 配置这个后才可以实现保持勾选状态
                idProperty: 'id',
                selectionHide: true
               

                // 配置这个后才可以实现保持勾选状态
            },
            paramsHeaderList:[],
            metricsHeaderList:[],
            singerType:true
        };
    },
    computed: {
        pipelineID () {
             return this.$route.query.pipeline_id || '';
        },
        taskName () {
             return this.$route.query.taskName || '';
        },
        iframeUrl () {
            let taskInfo = JSON.parse(getStorage('taskInfo'));
            return taskInfo.detailUrl;
        },
        disableClone () {
            let taskInfo = JSON.parse(getStorage('taskInfo'));
            return !!taskInfo.isFlowDeleted;
        }
    },
    mounted () {
          /* eslint-disable */
        setTimeout(()=>{
            this.hideDom();
        },500)
        let singerType = +getStorage('interactType');
        this.singerType = !!!singerType;
        this._showTaskDetail();
    },
    methods:{
        _showTaskDetail () {
            let taskInfo = JSON.parse(getStorage('taskInfo'));
            let {parameters} = taskInfo;
            if (parameters && parameters.length > 0) {
                parameters.forEach(item =>{
                    this.paramsHeaderList.push(item.name);
                });
               
                let parametersData = [];
                let parametersObj = {};
                for (let i = 0; i < parameters.length; i++) {
                    parametersObj[parameters[i].name] = parameters[i].value;   
                }
                parametersData.push(parametersObj);
                let paramsTable = this.$refs.paramsTable;
                this.$nextTick(()=>{
                    paramsTable && paramsTable.loadData(parametersData || []); 
                });
            };
            
        },

          // 新增任务弹窗
        _createInteractTaskFormWin () {
            if (!this.interactTaskFormWin) {
                this.interactTaskFormWin = this.$modal(AddInteractTask, {
                    autoDestory: true
                });
            }
            return this.interactTaskFormWin;
        },
        _cloneInteractTask () {
            let formWin = this._createInteractTaskFormWin();
            let record = JSON.parse(getStorage('taskInfo'));
            this.interactTaskFormWin.formRoot.setJsonValue(record);
            formWin.open({
                title: _('克隆任务'),
                data:{
                    paramList:record.parameters,
                    flowId:record.interactiveFlowId,
                    showAIFlowList:false,
                    typeList:[{
                        type:0,
                        name:_('单次训练')
                    }],
                    type:0
                },
                buttons: [{
                    cls: 'sfv-btn-primary',
                    actionName: 'submit',
                    loading: true,
                    text:  _('确定')
                }, {
                    cls: 'sfv-btn-primary',
                    actionName: 'copy',
                    text:_('修改当前参数继续新增')
                }, {
                    actionName: 'cancel',
                    text: '取消'
                }],
                copy: () => {
                    let ajaxParams = formWin.formRoot.getJsonValue();
                    delete ajaxParams.createTime;
                    this.ajaxSubmitInteractTask(ajaxParams, formWin, 'copy');
                },
                submit: () => {
                    let ajaxParams = formWin.formRoot.getJsonValue();
                    delete ajaxParams.createTime;
                    this.ajaxSubmitInteractTask(ajaxParams, formWin);
                }
            });
        },
        async ajaxSubmitInteractTask (params, formWin, type = 'add') {
            formWin.$mask();
            const ADD_INTERACT_TASK_URL = trainingUrlAdapter(`user/${userID}/interactiveTask`);
            let jsonData = await this.$ajax.post(ADD_INTERACT_TASK_URL, params);
            formWin.$unmask();
            let { success, msg } = jsonData;
            if (!success) {
                return this.$showErr(msg || _('保存失败'));
            }
            if (type === 'add') {
                this.$ok(_('新增任务成功'));
                formWin.hide();
                let query = deepClone(this.$route.query);
                this.$router.push({
                    path: `/project_manager/project_index/interact_task_manager`,
                    query: Object.assign(query)
                });
            } else {
                this.$ok(_('克隆任务成功'));
            }
        },
        _returnInteractTask () {
            let query = deepClone(this.$route.query);
            delete query.pipeline_id;
            delete query.taskName;
            this.$router.push({
                path: `/project_manager/project_index/interact_task_manager`,
                query: Object.assign(query)
            });
        },
        hideDom () {
            let _iframe = document.getElementById('iframe');
            let topLevelDom = _iframe.contentWindow.document.getElementsByClassName('topLevelToolbar_fbk8awx');   //get iframe下的id
            for (let i = 0; i < topLevelDom.length; i++) {
                topLevelDom[i].style.display = 'none';
            }
        }
    }
};
</script>
<style lang="less">
.interact-task__wrap {
    height: 100%;
    .visual__iframe {
        width: 100%;
        height: calc(100% - 200px);
        border: none;
        border-radius: 4px;
    }
    .pipeline-detail__top {
        height: 48px;
        border-bottom: 1px solid #ddd;
        margin: 0 12px;
        display: flex;
        align-items: center;
    }
     .common-title{
        font-weight: bold;
        color: #14161A;
        font-size: 14px;
        margin-bottom:5px;
    }
    .interact-task__table{
        width: 90%;
        .sfv-scrollbar-horizontal{
            display: none;
        }
    }
}
</style>
